<template>
  <div>
    <el-aside class="el-aside" style="height: 100vh;width: 202px;" >
      <el-row class="tac">
        <el-col :span="24">
          <span>
            <h5 class="title"><i class="el-icon-s-home"></i><span class="title span marg-l5">数据中心</span></h5>
          </span>
          <el-menu
              :default-active="activeNav"
              class="el-menu"
              ref="menu"
              @select="handleSelect"
              background-color="#323A52"
              text-color="#fff"
              active-text-color="#ffd04b"
          >
            <!-- <el-submenu index="/home">
                <template slot="title">
                    <i class="el-icon-s-home"></i>
                    <span>主页</span>
                </template>
                <el-menu-item index="/home">主页</el-menu-item>
            </el-submenu> -->
            <!--一级菜单-->
            <div v-for="menu in menuList" :key="menu.title">
              <div v-if="menu.children.length > 0">
                <el-submenu :index="menu.index">
                  <template slot="title">
                    <i :class="menu.icon"></i>
                    <span v-text="menu.title"></span>
                  </template>
                  <!--二级菜单-->
                  <div v-for="secondaryMenu in menu.children" :key="secondaryMenu.title">
                    <div v-if="secondaryMenu.children.length === 0">
                      <el-menu-item :key="secondaryMenu.title" v-text="secondaryMenu.title"></el-menu-item>
                    </div>
                    <div v-else>
                      <el-submenu :index="secondaryMenu.index">
                        <template slot="title">
                          <i :class="menu.icon"></i><span v-text="secondaryMenu.title"></span>
                        </template>
                        <!--三级级菜单-->
                        <el-menu-item-group>
                          <el-menu-item
                              v-for="thirdaryMenu in secondaryMenu.children"
                              :key="thirdaryMenu.title"
                              :index="thirdaryMenu.index"
                              v-text="thirdaryMenu.title"
                          ></el-menu-item>
                        </el-menu-item-group>
                      </el-submenu>
                    </div>
                  </div>
                </el-submenu>
              </div>
              <div v-else>
                <el-menu-item :index="menu.index">
                  <i :class="menu.icon"></i>
                  <span v-text="menu.title"></span>
                </el-menu-item>
              </div>
            </div>
          </el-menu>
        </el-col>
      </el-row>
    </el-aside>
  </div>
</template>

<script>
import {mapMutations} from 'vuex'

export default {
  name: 'Aside',
  data() {
    return {}
  },
  methods: {
    ...mapMutations(['add_tab']),
    handleSelect(key) {
      this.add_tab(key)
    },
  },
  computed: {
    menuList() {
      return this.$store.state.menuList
    },
    activeNav() {
      return this.$store.state.activeNav
    }
  },
}
</script>

<style scoped>
.el-aside {
  display: block;
  position: relative;
  background-color: #323A52 !important;
  width: 220px;
  padding: 0px 5px 0px 0px;
}

.el-menu {
  border-right-width: 0;
  width: 200px;
}

.title {
  text-align: center;
  color: white;
  padding: 5px 5px 5px 5px;
  margin: 5px 0px 10px 0px;
}
.title .span {
  font-size: smaller;
}

.marg-l5 {
  text-align: center;
  color: white;
  margin-left: 5px;
}
</style>